<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form :inline="true" :model="search" ref="searchForm">

        <el-row>
          <el-col :span="6">
            <el-form-item label="名称：" prop="normName">
              <el-input v-model="search.normName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="指标类型：" prop="normType">
              <el-select v-model="search.normType" placeholder="请选择">
                <el-option
                  v-for="item in controlData.normTypes"
                  :key="item.value"
                  :label="item.key"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="编码：" prop="normCode">
              <el-input v-model="search.normCode" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="执行类型：" prop="processType">
              <el-select v-model="search.executeType" placeholder="请选择">
                <el-option
                  v-for="item in controlData.executeTypes"
                  :key="item.value"
                  :label="item.key"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="margin-top: -2px">
              <el-button type="primary" @click="searchQuery">查询</el-button>
              <el-button type="info" @click="search = {};searchQuery()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <qm-table
      ref="qmTable"
      :data="query"
      keyProp="normId"
      :formOptions="{ labelWidth: '120px' }"
      :showCheckbox="false"
      :showView="false"
      menuType="text"
      :isCustomForm="true"
      :modalOptions="{ height: 630 }"
      :textMap="{ add: '创建考核指标' }"
      formRefs="normForm"
    >
      <qm-table-column field="normName">名称</qm-table-column>
      <qm-table-column field="normCode">编码</qm-table-column>
      <qm-table-column field="normType" :renderFunc="renderNormType">指标类型</qm-table-column>
      <qm-table-column field="scoresType" :renderFunc="renderScoresType">考核类型</qm-table-column>
      <qm-table-column field="processType" :renderFunc="renderProcessType">审核类型</qm-table-column>
      <qm-table-column field="enable" fieldtype="enabledisable">是否启用</qm-table-column>

      <template v-slot:form="{ model, models, controlData }">
        <el-tabs style="height: 500px;">
          <el-tab-pane label="考核项信息">
            <el-form
              class="qm-table-form"
              ref="normForm"
              label-width="120px"
              :model="model"
              :rules="rules.normForm"
            >

              <el-row>
                <el-col :span="12">
                  <el-form-item label="名称：" prop="normName">
                    <el-input v-model="model.normName" placeholder="请输入名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="分数上限：" prop="scoresLimit">
                    <el-input-number v-model="model.scoresLimit" :step="1" :min="0" step-strictly></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="编码：" prop="normCode">
                    <el-input v-model="model.normCode" placeholder="请输入编码"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="最低分：" prop="scoresMin">
                    <el-input-number v-model="model.scoresMin" :step="1" :min="0" step-strictly></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <!--                <el-col :span="12">-->
                <!--                  <el-form-item label="考核类型：" prop="scoresType">-->
                <!--                    <el-select v-model="model.scoresType" placeholder="请选择">-->
                <!--                      <el-option-->
                <!--                        v-for="item in controlData.scoresTypes"-->
                <!--                        :key="item.value"-->
                <!--                        :label="item.key"-->
                <!--                        :value="item.value"-->
                <!--                      ></el-option>-->
                <!--                    </el-select>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
                <el-col :span="12">
                  <el-form-item label="指标类型：" prop="normType">
                    <el-select v-model="model.normType" placeholder="请选择">
                      <el-option
                        v-for="item in controlData.normTypes"
                        :key="item.value"
                        :label="item.key"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="最高分：" prop="scoresMax">
                    <el-input-number v-model="model.scoresMax" :step="1" :min="0" step-strictly></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="流程类型：" prop="processType">
                    <el-select v-model="model.processType" placeholder="请选择">
                      <el-option
                        v-for="item in controlData.processTypes"
                        :key="item.value"
                        :label="item.key"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="执行类型：" prop="executeType">
                    <el-select v-model="model.executeType" placeholder="请选择">
                      <el-option
                        v-for="item in controlData.executeTypes"
                        :key="item.value"
                        :label="item.key"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="执行角色：" prop="executeRoleId">
                    <el-select
                      multiple
                      v-model="model.executeRoleId"
                      clearable
                      filterable>
                      <el-option
                        v-for="item in controlData.roles"
                        :key="item.roleId"
                        :label="item.name"
                        :value="item.roleId"
                        placeholder="请选择执行角色"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="执行代理类：" prop="executeProxyClass">
                    <el-input v-model="model.executeProxyClass" placeholder="请输入执行代理类"></el-input>
                  </el-form-item>
                </el-col>
                <!--                <el-col :span="12">-->
                <!--                  <el-form-item label="执行部门：" prop="executeDeptId">-->
                <!--                    <el-cascader-->
                <!--                      v-model="model.executeDeptId"-->
                <!--                      clearable-->
                <!--                      placeholder="请选择执行部门"-->
                <!--                      :options="controlData.departments"-->
                <!--                      :show-all-levels="false"-->
                <!--                      :props="{value:'id',label:'text',checkStrictly:true}"-->
                <!--                    ></el-cascader>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="备注：" prop="textarea">
                    <el-input type="textarea" :rows="2" v-model="model.remark"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否启用：" prop="enable">
                    <el-switch v-model="model.enable" class="drawer-switch"></el-switch>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </el-tab-pane>
        </el-tabs>
      </template>

    </qm-table>
  </div>
</template>

<script>
  import Controller from "@/libs/framework/controller";

  export default class Instance extends Controller {
    onBeforeInit() {
      this.urls = {
        query: [{url: "/eip/kpi/norm/query", method: "post"}],
        save: "/eip/kpi/norm/save",
        delete: "/eip/kpi/norm/delete",
        entity: "/eip/kpi/norm/getEntity",
        model: "/eip/kpi/norm/getListModel",
      };
    }

    onBeforeSave(postModel) {
      if (this.$util.isArray(postModel.model.executeDeptId) && postModel.model.executeDeptId.length > 0) {
        postModel.model.executeDeptId = postModel.model.executeDeptId[postModel.model.executeDeptId.length - 1];
      }
      postModel.model.executeRoleId = postModel.model.executeRoleId.toString()
    }

    onAfterGetEntity(result) {
      if (result.models.model.executeRoleId) {
        result.models.model.executeRoleId = result.models.model.executeRoleId.split(",")
      }
      super.onAfterGetEntity(result);
    }

    mixin() {
      return {
        data() {
          return {
            rules: {
              normForm: {
                normName: [{required: true, message: "请输入名称", trigger: "blur"}],
                normCode: [{required: true, message: "请输入编码", trigger: "blur"}],
                normType: [{required: true, message: "请选择指标类型", trigger: "blur"}],
                processType: [{required: true, message: "请选择流程类型", trigger: "blur"}],
                executeType: [{required: true, message: "请选择执行类型", trigger: "blur"}],
                scoresType: [{required: true, message: "请选择考核类型", trigger: "blur"}],
                scoresLimit: [{required: true, message: "请输入分数上限", trigger: "blur"}],
                scoresMax: [{required: true, message: "请输入最高分", trigger: "blur"}],
                scoresMin: [{required: true, message: "请输入最低分", trigger: "blur"}]
              }
            }
          }
        },
        methods: {
          renderNormType(data, row, column) {
            let find = this.super.$util.find(
              this.controlData.normTypes,
              (item) => {
                return item.value === data;
              }
            );
            return (find || {}).key;
          },
          renderScoresType(data, row, column) {
            let find = this.super.$util.find(
              this.controlData.scoresTypes,
              (item) => {
                return item.value === data;
              }
            );
            return (find || {}).key;
          },
          renderProcessType(data, row, column) {
            let find = this.super.$util.find(
              this.controlData.processTypes,
              (item) => {
                return item.value === data;
              }
            );
            return (find || {}).key;
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>
